<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>序列化操作</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#register").click(function(){
                // 只能获取到带有name属性的元素的数据
               console.log($("#userForm").serialize());
            });
        });
    </script>
</head>
<body>
<!--
    该操作一般只会存在于服务器开发
    需要将前台的数据传递到后台
    在表单中通过name属性进行传递
    传递到后台的数据会以键值对的方式进行传输
    其key为当前元素name属性值
    其value为用户真正输入的数据
    在后期Ajax开发中,会遇到通过js访问后台的情况
    那时候需要在js中获取到表单的数据
    可以通过序列化操作进行数据的读取
-->
<form id="userForm" action="#">
    用户名:<input type="text" name="username"/><br/>
    密码:<input type="password" name="password"/><br/>
    电话:<input type="text" name="phone"/><br/>
    地址:<input type="text" name="address"/><br/>
    <input id="register" type="button" value="提交">
</form>
</body>
</html>